<template>
  <div class="box">
    <header class="header">
      <div class="top">
        <a @click="goBack" class="iconfont icon-zuojiantou1"></a>
        <router-link to="register" tag="a">注册</router-link>
      </div>
    </header>
    <div class="content">
      <h2>欢迎您的回归</h2>
      <b>暂别忙碌的生活，开启美味生活</b>
      <mt-field label="+86" class="username" placeholder="请输入手机号" type="tel" v-model="username"></mt-field>

      <mt-field
        label=" "
        class="password"
        placeholder="请输入至少6位密码"
        type="password"
        v-model="password"
      ></mt-field>
      <p @click="login">登 录</p>
      <span>忘记密码？</span>
      <div class="qita">
        <h3>
          <a>其他账号登录</a>
        </h3>
        <ul>
          <li class="iconfont icon-weixin4"></li>
          <li class="iconfont icon-weibo"></li>
          <li class="iconfont icon-qq"></li>
          <li class="iconfont icon-shouji"></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Field, Toast } from "mint-ui";
import axios from "axios";
Vue.use(Field, Toast);
export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    login() {
      console.log(this.username);
      axios
        .post('/daxun/users/login', {
        username: this.username,
        password: this.password
      })
        .then(data => {
          console.log(data);
          Toast(data.data.message);
          if (data.data === 1) {
            Toast('登陆成功');
            localStorage.setItem("username", this.username);
            localStorage.setItem("token", data.data.token);
            localStorage.setItem("isLogin", "ok");
            this.$router.push("/");
          } else {
            Toast('登陆失败');
          }
        });
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/lib/reset.scss";
.header {
  @include rect(100%, 0.44rem);
  @include background-color(#fff);
  @include text-color(#000);
  border-bottom: 1px solid #bbb;
  .top {
    @include rect(100%, 0.44rem);
    a:nth-of-type(1) {
      @include font-size(20px);
      @include text-color(#000);
      @include line-height(38px);
      @include margin(3px 0 0 15px);
      font-weight: 600;
      float: left;
    }
    a:nth-of-type(2) {
      @include font-size(14px);
      @include text-color(#000);
      @include line-height(44px);
      @include margin(0 15px);
      float: right;
    }
  }
}
.content {
  margin-top: 20px;
  @include rect(100%, auto);
  overflow: unset !important;
  h2 {
    @include font-size(26px);
    @include font-weight(300);
    text-align: center;
  }
  b {
    @include font-weight(300);
    @include font-size(16px);
    text-align: center;
    display: block;
  }
  p {
    @include rect(90%, 0.4rem);
    @include background-color(#ffb31a);
    @include text-color(#fff);
    @include font-size(14px);
    text-align: center;
    @include line-height(40px);
    @include margin(80px auto);
    border-radius: 20px;
  }
  .username {
    @include rect(80%, 0.2rem);
    @include margin(50px 0 0 0.38rem);
    border-bottom: 1px solid #ccc;
    @include text-color(#000);
  }
  .password {
    @include rect(80%, 0.2rem);
    @include margin(0 auto);
    border-bottom: 1px solid #ccc;
  }
  span {
    width: 0.75rem;
    height: 30px;
    display: block;
    text-align: center;
    margin: 10px 0 0 2.6rem;
    font-size: 14px;
    color: rgb(99, 119, 212);
  }
  .qita {
    @include rect(90%, 80px);
    position: absolute;
    bottom: 20px;
    left: 5%;
    h3 {
      @include rect(100%, 20px);
      border-bottom: 1px solid #cccccc;
      text-align: center;
    }
    h3 a {
      color: #bbb;
      font-weight: 100;
    }
    ul {
      margin-top: 10px;
      display: flex;
      @include rect(100%, 60px);
    }
    li {
      @include flex();
      @include flexbox();
      @include flex-direction(column);
      @include justify-content();
      @include align-items();
      font-size: 24px;
    }
  }
}
</style>
